<template>
	<view class="allview">
		<view class="my-content">
			<view class="toptop">
				账号设置
			</view>
			<mylines></mylines>
			<view class="all" @tap="fullScreen">
				<view class="content-left">
					<view class="left-img">
						<image  class="img" :src="detailuser.provider === 'tel' || userInfo.provider === 'email'? `${baseurl}${detailuser.imgUrl}` : `${detailuser.imgUrl}`"></image>
						
					</view>
					
				</view>
						
				<view class="content-right">
					<view class="right-name">
						编辑大头像
					</view>
					<view class="right-img">
						<image class="img" src="../../static/tabBar/right.png" mode=""></image>
					</view>
				</view>
			</view>
			<mylines></mylines>
			<view class="my-content-list" v-for="(item,index) in updatedListtop" :key="item.id" @tap="gopathlist(item)">
				
				<view class="my-content-item">

					<view class="content">
						
						<view class="text">
							<view class="title">
								{{item.title}}:
							</view>
							
							<view class="content">
								{{item.content}}
							</view>
						</view>
					</view>

					<view class="imgs">
						<image class="img" src="../../static/tabBar/right.png" mode=""></image>
					</view>


				</view>
				<mylines></mylines>
				

			</view>
			
		</view>
		<view class="content-button" @tap="outlogin">
			退出账号
		</view>
		<transition
		          appear
		          name="animate__animated animate__bounce"
		          leave-active-class = "animate__backOutDown"
		          
		      >
		<view v-if="isShow" class="reserva-detal" @touchmove.stop.prevent="">
			<!-- 阴影框 -->
			<view class="pop-mask" @tap="hidePop()">
			</view>
			
			  <transition
			            appear
			            name="animate__animated animate__bounce"
			            enter-active-class = "animate__swing"
			            
			        >
			        <view class="pop-box">
						
			        	<view class="">
			        		<uninavbar :title="listtitle" left-icon="left" right-icon="checkbox" color="#1a9c34" @clickLeft="goback" @clickRight="savemsgbutton" ></uninavbar>
			        	</view>
						<view style="margin: 10rpx 0">
							<uni-easyinput :disabled="isshowpasswordinpute" type="password" trim="all" v-model="oldpassword" :placeholder="isshowpasswordinpute? '此框不可修改密码,请前往密码选项':'请输入旧密码'" ></uni-easyinput>
						</view>
						<view style="margin: 10rpx 0">
							<uni-easyinput v-if="!isshowpasswordinpute" trim="all" type="password" v-model="newpassword" placeholder='请输入新密码' ></uni-easyinput>
						</view>
			        	<view class="inptop">
							<uni-easyinput :disabled="! isshowpasswordinpute" trim="all" type="textarea" v-model="textcontent" placeholder="请输入内容"></uni-easyinput>
			        	</view>
			        	
			        	
			        </view>
			</transition>
		</view>
		</transition>
	</view>
</template>

<script>
	import mylines from '@/components/common/Lines.vue'
	import $http from '@/common/api/request.js'
	import {mapMutations,mapState} from 'vuex'
	import uninavbar from '@/uni_modules/uni-nav-bar/components/uni-nav-bar/uni-nav-bar.vue'
	import 'animate.css';
	import QfImageCropper from '@/uni_modules/qf-image-cropper/components/qf-image-cropper/qf-image-cropper.vue';
	export default {
		data() {
			return {
				baseurl:"https://zyc618.mynatapp.cc",
				isShow: false,
				wherelistid:-1,
				textcontent:"",//内容修改文本
				listtitle:"",
				detailuser:{},
				oldpassword:"",//旧密码
				newpassword:"",//新密码
				isshowpasswordinpute:true,
				listtop: [{
						id: 0,
						title: "昵称",
						bind:"nickName"
					},
					{
						id: 1,
						title: "签名",
						bind:"news"
					},
					{
						id: 2,
						title: "性别",
						bind:"sex"
					},
					{
						id: 3,
						title: "邮箱",
						bind:"email"
					},
					{
						id: 4,
						title: "地区",
						bind:"arce"
					},
					{
						id: 5,
						title: "手机号码",
						bind:"phone"
					},
					{
						id: 6,
						title: "生日",
						bind:"birthday"
					},
					{
						id: 7,
						title: "密码",
						bind:"mima"
					},
					
				],
				
			};
		},
		components: {
			mylines,uninavbar,QfImageCropper
		},
		onReady() {
			//获取数据
			this.userdetail()
		},
		computed:{
			...mapState({
				userInfo:state=>state.user.userInfo
			}),
			// 计算属性动态匹配:
			updatedListtop() {
			      return this.listtop.map(item => {
			             const bindValue = item.bind;
			             const detailValue = this.detailuser[bindValue];
			             // 返回包含 content 属性的新对象
			             return { ...item, content: detailValue || '******' };
			           });
			    }
		},
		methods:{
			...mapMutations(['outlgin']),
			//退出账号
			outlogin(){
				uni.showModal({
					title:"是否退出账号",
					content:"退出账号需重新登录",
					cancelColor:"#98c379",
					confirmColor:"#e06c61",
					success:  (res)=> {
								if (res.confirm) {
									this.outlgin();
									uni.navigateTo({
								url:'/pages/index/index'})
							} else if (res.cancel) {
								uni.showToast({
									title:"取消操作",
									mask:true,
									icon:"none"
								})
							}
					}
				})
				
			},
			//点击每个具体的item
			gopathlist(item){
				this.isShow = true;
				this.listtitle = item.title;
				this.wherelistid = item.id;
				if(item.id == 7){
					this.textcontent = '';
					this.isshowpasswordinpute = false;
				}else{
					this.textcontent = item.content;
					
					this.isshowpasswordinpute = true;
				}
			},
			//关闭修改框
			hidePop() {
				uni.showModal({
					title:"保存?",
					content:"您未保存修改内容",
					success: (res)=> {
					   			 if (res.confirm) {
					   			      if(this.wherelistid != 7){
										  this.savemsg();
									  }else{
										  this.savepassword()
									  }
									  
									  this.textcontent = ""
									  this.isshowpasswordinpute = true;
									  setTimeout(() => {
									  	this.isShow = false;
									  }, 200)
					   			    } else{
										setTimeout(() => {
											this.isShow = false;
											this.textcontent = ""
										}, 200)
									}
					   		}
				})
			},
			//点击保存,修改信息28通道修改照片地址 
			savemsg(){
				$http.request({
					url: "/user/update",
					method: "POST",
					header:{
						token:true
					},
					data: {
						content: this.textcontent,
						wherelistid:this.wherelistid,
						userid:this.userInfo.id
					}
				}).then((res) => {
					if(res.code === 200){
						uni.showToast({
							title:res.msg,
							duration:2000,
							icon:"none"
						})
						this.isShow = false;
						this.textcontent = "";
						this.isshowpasswordinpute = true;
						this.userdetail()
					}else{
						uni.showToast({
							title:"更新异常",
							icon:"none",
							during:2500,
							mask:true,
							icon:"error"
						})
					}
					
				}).catch((err) => {
					console.log(err);
				})
				
			},
			
			//修改密码接口:
			savepassword(){
				$http.request({
					url: "/user/updateuserpassword",
					method: "POST",
					header:{
						token:true
					},
					data: {
						oldpassword: this.oldpassword,
						newpassword: this.newpassword,
						userid:this.userInfo.id
					}
				}).then((res) => {
					if(res.code === 200){
						uni.showToast({
							title:res.msg,
							duration:2000,
							icon:"none"
						})
						this.isShow = false;
						this.oldpassword = "";
						this.newpassword = "";
						this.isshowpasswordinpute = true;
					}else if(res.code == 300){
						uni.showToast({
							title:res.msg,
							duration:2000,
							icon:"none"
						})
					}else{
						uni.showToast({
							title:"更新异常",
							icon:"none",
							during:2500,
							mask:true,
							icon:"error"
						})
					}
					
				}).catch((err) => {
					console.log(err);
				})
				
			},
			//点击左边回退按钮
			goback(){
				this.isShow = false;
			},
			//点击右边保存按钮
			savemsgbutton(){
				console.log(this.wherelistid);
				if(this.wherelistid != 7){
					this.savemsg();
				}else{
					this.savepassword();
				}
			},
			handleCrop(e) {
			                uni.previewImage({
			                    urls: [e.tempFilePath],
			                    current: 0
			                });
			            },
			//来到这个页面获取数据
			userdetail(){
				$http.request({
					url: "/user/detail",
					method: "POST",
					data: {
						userid: this.userInfo.id,
					}
				}).then((res) => {
					if(res.code === 200){
						this.detailuser=res.data;
					}else{
						uni.showToast({
							title:"用户异常",
							during:2500,
							mask:true,
							icon:"error"
						})
					}
					
				}).catch((err) => {
					console.log(err);
				})
			},
			//点击修改照片回调
			chooseImage(){
				return new Promise(resolve=>{
					uni.chooseImage({
						count:1,
						success:(res)=> {
							resolve(res.tempFilePaths[0])
						}
					})
				})
			},
			//选择图片后进行裁剪跳转
			fullScreen(){
				this.chooseImage().then(src=>{
					uni.navigateTo({
						url:`/pages/full-screen/full-screen?src=${decodeURIComponent(src)}&userid=${this.userInfo.id}`
					})
				})
			},
			
		},
		onLoad(e){
			
			
		}
	}
</script>

<style lang="scss">
	
	.allview{
		position: relative;
		height: 100hv;
		padding-bottom: 120rpx;
	}
	.my-content {
		.toptop{
			padding: 20rpx;
			
		}
		.all {
			display: flex;
			justify-content: space-between;
			align-items: center;
		
			.content-left {
				padding: 10rpx;
				display: flex;
				align-items: center;
				height: 150rpx;
				.left-img {
					border: 2rpx solid #cebfb3;
					border-radius: 100rpx;
					overflow: hidden;
		
					.img {
						width: 150rpx;
						height: 150rpx;
					}
					.dist {
						width: 600rpx;
					}
					
					.content {
						background-color: #fff;
						padding: 20rpx;
						border-radius: 20rpx;
						position: relative;
					
						.title {
							font-size: 36rpx;
							font-weight: bold;
							text-align: center;
							margin-bottom: 20rpx;
						}
					
						.close {
							position: absolute;
							top: 0rpx;
							right: 0;
							padding: 20rpx;
						}
					}
				}
		
				.letf-name {
		
					margin-left: 25rpx;
				}
			}
		
			.content-right {
				padding: 20rpx;
				display: flex;
		
				.right-name {
					color: #d7d7d7;
				}
		
				.right-img {
					.img {
						width: 30rpx;
						height: 30rpx;
					}
				}
			}
		}
		.my-content-list {
			.my-content-item {
				display: flex;
				justify-content: space-between;
				padding: 0 30rpx;
				margin: 20rpx 0;
				font-size: $uni-font-size-lg;
				.content {
					display: flex;
					.text {
						line-height: 56rpx;
						font-size: $uni-font-size-base;
						color: $uni-text-color-grey;
						line-height: 40rpx;
						display: flex;
						align-items: center;
						.title{
							padding-right: 25rpx;
						}
						.content{
							
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 1;
							overflow: hidden;
						}
					}
				}

				.imgs {
					padding: 10rpx;
					.img {
						width: 30rpx;
						height: 30rpx;
					}

				}


			}

			

		}
	}
	
	.content-button {
		background-color: #00a8df;
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		padding: 30rpx;
		font-weight: 800;
		text-align: center;
	}
	
	
	.reserva-detal {
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		z-index: 999;
		.pop-mask {
			position: absolute;
			left: 0;
			bottom: 0;
			width: 100%;
			height: 30%;
			background-color: rgba(0, 0, 0, .6);
		}
	
		.pop-box {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 70%;
			background-color: rgba(255, 255, 255, .98);
			.inptop {
				display: flex;
				font-size: $uni-font-size-lg;
				padding: 30rpx;
				
			}
		}
	}
	
</style>